import { useState } from 'react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';

interface OCRResultProps {
  text: string;
  onClear: () => void;
}

export function OCRResult({ text, onClear }: OCRResultProps) {
  const [copied, setCopied] = useState(false);
  
  const copyToClipboard = () => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      toast.success('文本已复制到剪贴板');
      setTimeout(() => setCopied(false), 2000);
    });
  };
  
  return (
    <div className="w-full max-w-2xl mx-auto mt-8">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-semibold">识别结果</h3>
        <div className="flex gap-2">
          <button 
            onClick={copyToClipboard}
            className="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors flex items-center gap-1.5"
          >
            <i className="fa-solid fa-copy"></i>
            <span>{copied ? '已复制' : '复制文本'}</span>
          </button>
          <button 
            onClick={onClear}
            className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <i className="fa-solid fa-times"></i>
          </button>
        </div>
      </div>
      
      <div className={cn(
        "min-h-[200px] p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm",
        "whitespace-pre-wrap text-gray-800 dark:text-gray-200"
      )}>
        {text}
      </div>
      
      <div className="mt-4 text-sm text-gray-500 dark:text-gray-400 flex justify-between">
        <span>字符数: {text.length}</span>
        <span>段落数: {text.split('\n').filter(p => p.trim() !== '').length}</span>
      </div>
    </div>
  );
}